<template>
  <view class="main">
    <view>
        <view class="list" v-for="(item, index) in addressList" :key="index" @click="handleAddress(item)">
            <view class="user">
                <text class="name">{{ item.receiverName}}</text>
                <text class="phone">{{ item.receiverPhone}}</text>
                <view class="tag" v-if="item.tag">{{ item.tag }}</view>
            </view>
            <view class="address">{{ item.addressDetail }}</view>
            <view class="list-footer">
                <view class="def" :class="{'checked': item.isDefault === 1}"> 
                    <text  v-if="item.isDefault === 1" class="iconfont icon-checked" ></text>
                    <text v-else  class="iconfont icon-checkbox" ></text>
                    <text> 默认地址</text>
                </view>
                 <view class="btns">
                    <view class="btn-item" @click.stop="handleEdit(item)">
                        <text class="iconfont icon-edit" ></text>
                        <text>编辑</text>
                    </view>
                    <view class="btn-item" @click.stop="handleDel(item)">
                        <text class="iconfont icon-del" ></text>
                        <text>删除</text>
                    </view>
                 </view>
            </view>
        </view>
    </view>
    <view class="page-footer" @click="handelToAdd">
        <view class="footer-content">添加地址</view>
        
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { useStore } from 'vuex'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import {getAddressListApi, delAddressApi} from '@/api/user'

const store = useStore()

const addressList = computed(() => store.getters['user/addressList']);
const pageQueryData = ref(null)
onLoad((options)=> {
    pageQueryData.value = options
    getAddressList()
})
async function getAddressList(){
   store.dispatch('user/getAddressList')
}
function handleAddress(data) {
    if(pageQueryData.value?.selected) {
        uni.$emit('selectedAddress',data)
        uni.navigateBack()
    }
  
}
function handleDel(item){
    uni.showModal({
        title: '提示',
        content: '是否删除？',
        success: async function (res) {
            if (res.confirm) {
                await delAddressApi({id: item.id})
                uni.showToast('已删除')
                getAddressList()
            }
        }
    });
}

function handelToAdd(){
    uni.navigateTo({
        url: '/subpkgs/mine/address/edit'
  })
}

function handleEdit(item){
    uni.navigateTo({
        url: '/subpkgs/mine/address/edit?id=' + item.id
  })
}

</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background: #F4F6F8;
  padding-top: 20rpx;
  padding-bottom: calc(140rpx + var(--safe-area-inset-bottom));
    .list{
        padding: 32rpx;
        background: #fff;
        margin-bottom: 20rpx;
        .user{
            font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            // line-height: 36rpx;
            margin-bottom: 16rpx;
            display: flex;
            align-items: center;
            .name{
                margin-right: 24rpx;
            }
            .phone{
                margin-right: 16rpx;
            }
            .tag{
                height: 36rpx;
                padding: 0 16rpx;
                background: #FFE5CC;
                border-radius: 4rpx 4rpx 4rpx 4rpx;
                border: 1rpx solid #FF8F1F;
                font-weight: 400;
                font-size: 20rpx;
                color: #FF8F1F;
            }
        }
        .address{
            font-weight: 400;
            font-size: 24rpx;
            color: #999999;
            line-height: 30rpx;
            margin-bottom: 24rpx;
        }
        .list-footer{
            border-top: 1rpx solid #EEEEEE;
            display: flex;
            justify-content: space-between;
            padding-top: 24rpx;
            .def{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                line-height: 32rpx;
                .icon-checkbox{
                    color: #666666;
                }
                &.checked{
                    color: #FF8F1F;
                }
                .iconfont{
                    font-size: 30rpx;
                    margin-right: 4rpx;
                }
            }
            .btns{
                display: flex;
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                line-height: 32rpx;
                .btn-item{
                    padding-left: 40rpx;
                    color: #666666;
                    .iconfont{
                        font-size: 24rpx;
                        margin-right: 8rpx;
                    }
                }
            }
        }
    } 
    .page-footer{
        position: fixed;
        bottom: 0;
        left: 0;
        background: #FFFFFF;
        box-sizing: content-box;
        padding-bottom: var(--safe-area-inset-bottom);
        align-items: center;
        .footer-content{
            width: 100vw;
            padding: 24rpx 0;
            background: #FF8F1F;
            height: 98rpx;
            font-weight: 400;
            font-size: 32rpx;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
